<script setup lang="ts">
import { GameSwiperContainer } from '~comp-b/game';
import DefaultType from '~/assets/imgs/default_type.png';
import Viewall from '~/assets/imgs/viewall.png';
import { GameMenuLoading } from '~/composables/useGameLoading';
import SupplieList from './SupplieList.vue';

const { gameTypes, gameAllQry } = queries.useGameAllQuery();

const appStore = useAppStore();

const bp = useAppBreakpoints();
// 最大显示游戏数量
const maxGameCount = computed(() => bp.ltTablet ? 11 : 24);

const games = computed(() => gameTypes.value?.filter(i => i && !!i.game && (i.show_position === 2 || i.show_position === 3)).map((i, key) => {
  let singleLine = 11;
  let doubleRow = 22;
  let displayTwoLines = false;
  if (bp.ltLaptopl && bp.tablet) {
    singleLine = 6;
    doubleRow = 12;
  }
  if (bp.ltTablet) {
    doubleRow = 4;
    singleLine = 4;
  }

  // 无论多少行都只显示11个游戏
  let game = i.game?.slice(0, maxGameCount.value) ?? [];
  const viewAll = { name: 'view all', status: -1 };
  const len = game?.length ?? 0;

  // 非首排
  if (key) {
    if (len > singleLine) {
      game.push(viewAll);
    }
  }
  // 当数量大于等于18个时显示两行,或是屏幕小于1024时一直显示两行
  if ((!key && len >= 18) || (!key && bp.ltTabletl)) {
    if (len >= doubleRow && len % 2 > 0) {
      game.push(viewAll);
    }
    // 假设大于22个并且是单数加上view all
    game = splitArrayIntoChunks(game);
    displayTwoLines = true;
  }
  else if (!key && len < 18) {
    game.push(viewAll);
  }

  return {
    ...i,
    game,
    game_count: i.game?.length ?? 0,
    displayTwoLines,
  };
}));

//  切成两个一组
function splitArrayIntoChunks(arr: any) {
  const result = [];
  for (let i = 0; i < arr.length; i += 2) {
    const chunk = arr.slice(i, i + 2);
    result.push(chunk);
  }
  return result;
}
</script>

<template>
  <TSuspenseView v-bind="buildSvPropsOfQuery(gameAllQry)">
    <div v-for="(group, groupI) in games" :key="group.type_id">
      <div v-if="group.game" class="mt-3 flex justify-between text-sys-text-head lt-mobile:(my-0 mt-2.5)">
        <div class="flex items-center gap-2">
          <img v-if="group.alias" :src="!!group.alias ? appStore.getCdnResPath('gameTypeIcon', group.alias) : DefaultType" class="w-4">
          {{ group.name }}
        </div>
        <span class="flex-center cursor-pointer text-sys-text-body tabletl:hidden lt-mobile:text-sm" @click="$router.push(buildGameListRoute(group))">
          {{ $t('qr8w4TkIrldt_49pKk6Mi') }}
          <i class="i-ion:ios-arrow-down ml-1 rotate--90 text-6 lt-mobile:text-base" />
        </span>
        <div class="*: flex-between gap-1.5 lt-tabletl:hidden *:cursor-pointer *:rounded-lg">
          <div class="bg-#26272E px-5 py-2" @click="$router.push(buildGameListRoute(group))">
            {{ $t('qr8w4TkIrldt_49pKk6Mi') }}
          </div>
          <div class="bg-#3E404C p-2.5 py-2" :class="`game-menu-prev-${groupI}`">
            <i class="i-ri:arrow-left-s-line text-sm" />
          </div>
          <div class="bg-#3E404C p-2.5 py-2" :class="`game-menu-next-${groupI}`">
            <i class="i-ri:arrow-right-s-line text-sm" />
          </div>
        </div>
      </div>
      <template v-if="!groupI">
        <GameSwiperContainer :navigation="{ nextEl: `.game-menu-next-${groupI}`, prevEl: `.game-menu-prev-${groupI}` }">
          <swiper-slide v-for="(item, key) in group.game" :key="key">
            <template v-if="item.status < 0">
              <img :src="Viewall" class="w-full object-cover hover:scale-103" @click="$router.push(buildGameListRoute(group))">
            </template>
            <template v-else>
              <TGameCover v-if="(Array.isArray(item) && item[0]?.status > 0) || typeof item === 'object'" class="mb-3.5 w-full lt-mobile:mb-2.5" :class="{ 'mb-3.5': group.displayTwoLines }" :detail="group.displayTwoLines ? item[0] : item" />
              <TGameCover v-if="group.displayTwoLines && item[1]?.status > 0" class="w-full" :detail="item[1]" />
              <img v-if="group.displayTwoLines && (item[0]?.status < 0 || item[1]?.status < 0)" :src="Viewall" class="w-full object-cover hover:scale-103" @click="$router.push(buildGameListRoute(group))">
            </template>
          </swiper-slide>
        </GameSwiperContainer>
      </template>
      <template v-if="!!groupI">
        <GameSwiperContainer :navigation="{ nextEl: `.game-menu-next-${groupI}`, prevEl: `.game-menu-prev-${groupI}` }">
          <swiper-slide v-for="(item) in group.game" :key="item.code">
            <template v-if="item.status < 0">
              <img :src="Viewall" class="w-full border-rd-2 object-cover hover:scale-103" @click="$router.push(buildGameListRoute(group))">
            </template>
            <template v-else>
              <TGameCover class="w-full" :detail="item" />
            </template>
          </swiper-slide>
        </GameSwiperContainer>
      </template>
      <template v-if="group.name === 'Hot Picks'">
        <SupplieList />
      </template>
    </div>
    <template #pending>
      <GameMenuLoading />
    </template>
  </TSuspenseView>
</template>

<style lang="scss" scoped>
.swiper-button-disabled {
  --uno: '!bg-#26272E !text-#848A9D';
}
</style>
